<template>
	<view :style="{ paddingTop: systemInfo.statusBarHeight + systemInfo.titleBarHeight + 'px' }">
		<title-bar :back="!invite" title="授权登录"></title-bar>
		<view class="page-content common-page-content" :style="{ minHeight: systemInfo.minHeight }">
			<view class="logo-layout">
				<image src="../../static/logo.png"></image>
			</view>
			<view class="info-item">
				<text>欢迎使用网上纪念馆</text>
				<text>授权登录后您将体验到更多功能</text>
			</view>
			<view class="control-layout">
				<button @click="getUserInfo()"><common-button title="授权登录"></common-button></button>
			</view>
			<view class="common-bottom-bg"></view>
		</view>
	</view>
</template>

<script>
	import {
		mapState,
		mapActions
	} from 'vuex';

	export default {
		data() {
			return {
				invite: undefined
			};
		},
		computed: {
			...mapState({
				systemInfo: state => state.app.systemInfo
			})
		},
		methods: {
			...mapActions(['login']),
			getUserInfo() {
				this.$debounce.debounce({
					key: 'getUserInfo',
					time: 2000,
					success: () => {
						uni.getUserProfile({
							desc: '授权使用您的身份信息',
							success: e => {
								this.login(e).then(res => {
									if (res.code === 200) {
										uni.navigateBack();
									}
								});
							}
						});
					}
				});
			}
		},
		onLoad(data) {
			this.invite = data.invite;
		}
	};
</script>

<style lang="scss" scoped>
	@import './auth-user.scss';
</style>